<!-- 我的资产 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="我的资产" />
    <view class="wallet">
      <view class="wallet__header">
        <view class="wallet__header__icon">
          <icon :class="redPacket?.icon" type="" />
        </view>
        <view class="wallet__header__wrapper">
          <view class="wallet__header__wrapper__label">{{ redPacket?.label }}</view>
          <view class="wallet__header__wrapper__value">￥{{ redPacket?.value }}</view>
        </view>
      </view>
      <view class="wallet__content">
        <uni-grid :column="3" :highlight="true">
          <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
            <view class="wallet__content__item" @click="to(item.code)">
              <icon :class="item.icon" type="" />
              <text class="wallet__content__item__label">{{ item.label }}</text>
              <text class="wallet__content__item__value">
                {{ unit(item.code, item.value) }}
              </text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { ref } from 'vue';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { WalletModel } from '@/services/model/walletModel';
  import { onLoad } from '@dcloudio/uni-app';
  import { getMyWallet } from '@/services/api/wallet/wallet';
  import { ResultEnum } from '@/enums/httpEnum';

  const list = ref<WalletModel[]>([]);

  const redPacket = ref<WalletModel>();

  onLoad(() => {
    loadData();
  });

  const loadData = () => {
    getMyWallet().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        list.value = data.data.filter((item) => item.code != 'redPacket');
        let arr: any = [];
        data.data.forEach((item) => {
          if (item.code != 'redPacket') {
            arr.push(item);
          } else {
            redPacket.value = item;
          }
        });
        list.value = arr;
      }
    });
  };

  const unit = (type: string, value: string) => {
    if (type == 'coupon' || type == 'card') {
      return value + ' 张';
    }
    if (type == 'coin') {
      return value + ' 个';
    }
    if (type == 'balance') {
      return '￥' + value;
    }
    return value;
  };

  const to = (type: string) => {
    if (type == 'coupon') {
      router.push(config.route.coupon);
    }
    if (type == 'coin') {
      router.push(config.route.coin);
    }
    if (type == 'balance') {
      router.push(config.route.wallet_balance);
    }
    if (type == 'card') {
      router.push(config.route.coupon);
    }
  };
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .wallet {
    &__header {
      background-color: #ff6a6c;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;

      padding: 50rpx 0;

      &__icon {
        padding-right: 10rpx;

        icon {
          font-size: 60rpx;
        }
      }

      &__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

        &__label {
          font-size: 32rpx;
        }

        &__value {
          font-size: 24rpx;
          color: #bbb;
        }
      }
    }

    &__content {
      &__item {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        height: 100%;

        icon {
          font-size: 60rpx;
          color: #ff6a6c;
        }

        &__label {
          color: #333;
        }

        &__value {
          color: #bbb;
          font-size: 24rpx;
        }
      }
    }
  }
</style>
